<template>
    <div>
        <van-nav-bar
            title="新闻详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        <div class="content">
            <div class="title">{{news.title}}</div>
            <div class="msg">
                <div class="author" v-if="news.baseUser">{{news.baseUser.realname}}</div>
                <div v-else>佚名</div>
                <div class="publishTime">{{time}}</div>
            </div>
            <div class="details" v-html="news.content"></div>
            <div class="readTimes"><svg t="1608362909194" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="20" height="20"><path d="M512 716.8c-105.198933 0-191.146667-85.947733-191.146667-191.146667s85.947733-191.146667 191.146667-191.146666 191.146667 85.947733 191.146667 191.146666S617.198933 716.8 512 716.8z m0-54.613333c75.025067 0 136.533333-61.508267 136.533333-136.533334s-61.508267-136.533333-136.533333-136.533333-136.533333 61.508267-136.533333 136.533333 61.508267 136.533333 136.533333 136.533334z m0 218.453333c-178.688 0-315.050667-116.872533-407.586133-344.712533a27.306667 27.306667 0 0 1 0-20.548267C196.9152 287.5392 333.312 170.666667 512 170.666667s315.050667 116.872533 407.586133 344.712533a27.306667 27.306667 0 0 1 0 20.548267C827.0848 763.767467 690.688 880.64 512 880.64z m0-54.613333c151.04 0 268.151467-98.235733 352.768-300.373334-84.650667-202.1376-201.728-300.373333-352.768-300.373333-151.04 0-268.151467 98.235733-352.768 300.373333 84.650667 202.1376 201.728 300.373333 352.768 300.373334z" p-id="3154"></path></svg>{{news.readTimes}}</div>
        </div>
    </div>
    
</template>

<script>
import axios from '../http/axios'
import moment from 'moment'
export default {
    data() {
        return  {
            news: '',
            time: ''
        }
    },
    created() {
        this.find_details()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        // 根据id获取详情
        find_details() {
            var id = {
                id: this.$route.query.id
            }
            axios.get("http://39.96.21.48:8001/article/findById",{params: id}).then(res => {
                this.news = res.data.data
                this.time = moment(this.news.publishTime).format("YYYY-MM-DD HH:mm:ss")
                console.log(this.news)
            })
        }
    }
}
</script>

<style scoped>
    .readTimes {
        text-align: end;
        font-size: 12px;
        color: #999;
    }
    .msg {
        color: #555;
        font-size: 13px;
        overflow: hidden;
    }
    .msg > div {
        float: left;
        margin-right: 2rem;
        line-height: 1rem;
    }
    .content {
        margin: 0 1rem;
    }
    .title {
        text-align: center;
        font-weight: 700;
        margin: 1rem;
    }
</style>